<script>
import store from "@/store"
import { appActionType } from "@/store/modules/app"
import { showModal } from "@/utils"

export default {
  name: "index",
  computed: {
    //缓存的自习室id，便于从背单词、刷题界面跳转回来
    studyRoomId: {
      get() {
        return store.getters[appActionType.getters.studyRoomId]
      },
      set(val) {
        store.commit(appActionType.mutations.studyRoomId, val)
      },
    },
    offsetX: {
      get() {
        return store.getters[appActionType.getters.studyRoomFloatOffsetX]
      },
      set(val) {
        store.commit(appActionType.mutations.studyRoomFloatOffsetX, val)
      },
    },
    offsetY: {
      get() {
        return store.getters[appActionType.getters.studyRoomFloatOffsetY]
      },
      set(val) {
        store.commit(appActionType.mutations.studyRoomFloatOffsetY, val)
      },
    },
  },
  data() {
    return {
      touchStartX: 0,
      touchStartY: 0,
    }
  },
  methods: {
    touchStart(e) {
      this.touchStartX = e.touches[0].clientX
      this.touchStartY = e.touches[0].clientY
    },
    touchMove(e) {
      const moveX = e.touches[0].clientX
      const moveY = e.touches[0].clientY
      this.offsetX += moveX - this.touchStartX
      this.offsetY += moveY - this.touchStartY
      this.touchStartX = moveX
      this.touchStartY = moveY
    },
    goBackToStudyRoom() {
      showModal({
        title: "提示",
        content: "确定要返回自习室吗？",
      }).then((boolean) => {
        if (boolean) {
          uni.reLaunch({ url: "/studyRoom/pages/learning/index" })
        }
      })
    },
  },
  // watch: {
  //   studyRoomId: {
  //     handler(val) {
  //       return console.log(val, "val")
  //     },
  //     immediate: true,
  //   },
  // },
}
</script>

<template>
  <view
    class="component"
    @touchstart="touchStart"
    @touchmove.stop="touchMove"
    :style="{ transform: `translate(${offsetX}px, ${offsetY}px)` }"
    v-if="studyRoomId"
    @click="goBackToStudyRoom"
  >
    <view class="title">自习室</view>
    <view class="sub-title">点击返回</view>
  </view>
</template>

<style scoped lang="scss">
.component {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  right: 6rpx;
  width: 100rpx;
  height: 100rpx;
  background: var(--theme-color);
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 50%;
  z-index: 9999;
  .title {
    font-size: 26rpx;
    color: #fff;
  }
  .sub-title {
    font-size: 18rpx;
    color: #fff;
    margin-top: 10rpx;
  }
}
</style>
